<template>
  <!-- AI快速识别 -->
  <baseslot>
    <template v-slot:content>
      <div class="container">
        <!-- 筛选框 -->
        <div class="top-line">
          <div class="left-line">
            <el-select
              v-model="pestvalue"
              clearable
              filterable
              placeholder="请先选择品种"
              @change="handleChange"
            >
              <el-option
                v-for="(item, index) in pestlist"
                :key="index"
                :label="item.name"
                :value="item.cropId"
              />
            </el-select>
            <!-- TODO:图片 -->
            <div class="upload">
              <img src="./image/upload.png" alt="" />
              <uploadimage
                class="uploadImg"
                v-if="pestURL || pestvalue"
                ref="zhupimg"
                :access-token="accessToken"
                @child-event="getimageurl"
                @respimageurl="respimageurl"
              />
            </div>
          </div>
          <div class="save-but-line">
            <img
              src="./image/save1.png"
              v-if="judgePermission(13, 'save')"
              @click="savepest()"
            />
          </div>
        </div>
        <div class="insect-alert-main">
          <!-- 图片和表格 -->
          <div class="zh-myside">
            <div class="leftImg">
              <img :src="nowimageurl" class="image" />
              <div style="padding: 10px">
                <span v-if="nowimageurl !== ''"
                  >{{ imagename }}： {{ dateToFormat(currentDate) }}</span
                >
              </div>
            </div>
            <div class="table">
              <div class="table-title">
                <img src="./image/pestsInformation.png" alt="" />
              </div>
              <div v-for="item in nowallpestlist.similarPDs" :key="item.pdName">
                <div class="row">
                  <div class="tit">{{ item.pdName }}</div>
                  <div class="similarity">相似度：{{ item.dconf }}%</div>
                </div>
              </div>
            </div>
          </div>
          <!-- 病虫害详细信息 -->
          <div class="footer">
            <div class="title">
              <img src="./image/detailedinformation.png" alt="" />
            </div>
            <div class="content">
              <div class="scroll-wrap">
                <!-- 滚动条要包裹的内容 -->
                <div
                  class="simborder"
                  v-for="(itemtwo, indextwo) in nowallpestlist.similarPDs"
                  :key="indextwo"
                >
                  <div class="contents">
                    <div class="contents-header">
                      <div class="lineone">
                        <div class="one-title">
                          {{ itemtwo.pdName }}
                        </div>
                        <div class="img1s" @click.stop="identi(itemtwo)">
                          <img
                            v-show="dialogallVisible"
                            class="img1"
                            src="@/assets/unifiedPicture/drug-s.png"
                          />
                        </div>
                        <div class="img2s" @click.stop="identifymet(itemtwo)">
                          <img
                            v-show="dialogVisible"
                            class="img2"
                            src="@/assets/unifiedPicture/discern-s.png"
                            @click.stop="identifymet(itemtwo)"
                          />
                        </div>
                      </div>
                      <div class="linetwo">
                        {{ itemtwo.commonNameSort }}
                      </div>
                    </div>
                    <div class="contents-img">
                      <img :src="itemtwo.typicalImg" class="linethree" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <el-dialog
        :title="newallpestmessage.pdName"
        :visible.sync="dialogVisible"
        width="60%"
      >
        <div class="tetst">
          <div>虫害种类：{{ newallpestmessage.commonNameSort }}</div>
          <div>种植物种类：{{ newallpestmessage.cropName }}</div>
          <div
            v-for="visitem in newallpestmessage.outline"
            :key="visitem.keyId"
          >
            <div>{{ visitem.keyName }}</div>
            <div>{{ visitem.value }}</div>
          </div>
          <div
            v-for="visitemone in newallpestmessage.preventionAdvice"
            :key="visitemone.keyId"
          >
            <div>{{ visitemone.keyName }}</div>
            <div>{{ visitemone.value }}</div>
          </div>
          <!-- <div>种植物种类：{{newallpestmessage.cropName}}</div> -->
          <img :src="newallpestmessage.typicalImg" class="image" />
        </div>
      </el-dialog>
      <el-dialog
        :title="'推荐用药'"
        :visible.sync="dialogallVisible"
        width="60%"
      >
        <div v-for="(item, index) in newallmessage" :key="index" class="tetst">
          <div v-if="item.pestcideName" class="head">
            药品名字：
            <span>{{ item.pestcideName }}</span>
          </div>
          <div v-if="item.pcId">
            有效成分编码:
            <span>{{ item.pcId }}</span>
          </div>
          <div v-if="item.pcName">
            有效成分名称:
            <span>{{ item.pcName }}</span>
          </div>
          <div v-if="item.registryNumber">
            登记证号:
            <span>{{ item.registryNumber }}</span>
          </div>
          <div v-if="item.manufacturer">
            生产厂家:
            <span>{{ item.manufacturer }}</span>
          </div>
          <div v-if="item.dosageForm">
            剂型:
            <span>{{ item.dosageForm }}</span>
          </div>
          <div v-if="item.content">
            含量:
            <span>{{ item.content }}</span>
          </div>
          <div v-if="item.recommendDose">
            推荐剂量:
            <span>{{ item.recommendDose }}</span>
          </div>
          <div v-if="item.usageNotice">
            用药提示:
            <span>{{ item.usageNotice }}</span>
          </div>
          <div v-if="item.choiseFlag">
            严选标记:
            <span>{{ item.choiseFlag === 0 ? "普通" : "严选" }}</span>
          </div>
          <!-- <div>种植物种类：{{newallpestmessage.cropName}}</div> -->
          <div class="img">
            <img
              v-for="(itern, indexs) in item.images"
              :key="indexs"
              :src="itern"
              class="image"
            />
          </div>
        </div>
      </el-dialog>
    </template>
  </baseslot>
</template>
<script>
import Pagination from "@/components/Pagination";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import zhaxios from "axios";
import uploadimage from "./componnents/uploadimage";
import baseslot from "@/components/BaseMainSlot/baseone.vue";
import nowpagereq from "@/api/digital-production/pest-management/pest-distinguish/index";
import { getToken } from "@/utils/auth";
import { mapGetters } from "vuex";
export default {
  name: "PestDistinguish",
  components: {
    uploadimage,
    baseslot,
    BaseMainSlot,
    Pagination,
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalSize: 10,
      dialogVisible: false,
      newallpestmessage: {
        typicalImg: "",
        commonNameSort: "",
        pdName: "",
        preventionAdvice: [], // 防治建议
        outline: [], // 详细介绍
      },
      newallmessage: [],
      // 当前选中的病虫害详细信息
      pdMessage: {},
      nowallpestlist: {
        // 病虫害图片
        identifyImg: "",
        // 详细信息
        similarPDs: [],
      },
      nowrespimageurl: "",
      imagename: "",
      // 当前的令牌
      accessToken: "",
      // 当前要上传的图片
      nowimageurl: "",
      currentDate: new Date(),
      value2: [],
      options: [],
      pestvalue: "SD",
      pestURL: "",
      image: null,
      usMessage: {},
      // ImageUrl:
      //   this.$baseurl.webServiceUrl +
      //   "v3/pestsDistinguish/cleverPlanting/saveIm",
      uploadTip: "????",
      cropperVisible: false,
      autoCropWidth: "1024",
      autoCropHeight: "1024",
      file: null,
      dialogallVisible: false,
      pestlist: [
        {
          name: "水稻",
          cropId: "SD",
        },
        {
          name: "小麦",
          cropId: "XM",
        },
        {
          name: "桃",
          cropId: "TAO",
        },
        {
          name: "葡萄",
          cropId: "PT",
        },
        {
          name: "草莓",
          cropId: "CM",
        },
        {
          name: "茶",
          cropId: "CHA",
        },
      ],
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission",
    }),
    headers() {
      return {
        accessToken: sessionStorage.token,
        organizationNo: sessionStorage.organizationNo,
        organizationList: sessionStorage.organizationList,
        databaseName: sessionStorage.databaseName,
        virtualSystemNo: sessionStorage.virtualSystemNo,
      };
    },
  },
  created() {
    this.getlipai();
    this.handleChange();
  },
  methods: {
    changePageSize() {},
    changeCurrentPage() {},
    // uploadTip(e) {
    //   console.log(e)
    // },
    handleSuccess(e) {
      console.log(e);
    },
    handleChange(e) {
      // console.log(e)
      this.pestURL = e || this.pestvalue;
      nowpagereq
        .getpestCondition({
          cropId: e || this.pestvalue,
          organizationNo: sessionStorage.organizationNo,
        })
        .then((res) => {
          if (res.code === 1) {
            if (res.data) {
              if (res.data.length > 0) {
                this.nowallpestlist = res.data[0];
                this.nowimageurl = this.nowallpestlist.identifyImg || "";
                this.imagename = "上传时间";
              } else {
                this.nowallpestlist = {
                  // 病虫害图片
                  identifyImg: "",
                  // 详细信息
                  similarPDs: [],
                };
                this.nowimageurl = "";
                this.imagename = "上传时间";
              }
              // console.log(this.nowallpestlist);
            }
          } else {
            this.$message.error("获取最近识别记录失败！");
          }
        });
    },
    // 点击保存虫害识别信息
    savepest() {
      if (this.nowimageurl !== "") {
        let params = {
          ...this.nowallpestlist,
          organizationNo: getToken("organizationNo"),
        };
        nowpagereq.savepestdisting(params).then((res) => {
          if (res.code === 1) {
            this.$message.success("保存成功！");
          } else {
            this.$message.error("保存失败！");
          }
        });
      } else {
        this.$message.warning("请先进行一条识别！");
      }
    },
    // 获取最近的一条信息
    getpest() {
      nowpagereq.getpestdisting().then((res) => {
        if (res.code === 1) {
          if (res.data) {
            this.nowallpestlist = res.data;
            this.nowimageurl = this.nowallpestlist.identifyImg || "";
            this.imagename = "最近识别图片";
            console.log(this.nowallpestlist);
          }
        } else {
          this.$message.error("获取最近识别记录失败！");
        }
      });
    },
    // 获取令牌
    getlipai() {
      zhaxios({
        url:
          this.$baseurl.webServiceUrl +
          "v3/pestsDistinguish/cleverPlanting/getCropList",
        method: "get",
        headers: {
          accessToken: sessionStorage.token,
          databaseName: sessionStorage.databaseName,
          organizationList: sessionStorage.organizationList,
          organizationNo: sessionStorage.organizationNo,
          virtualSystemNo: sessionStorage.virtualSystemNo,
          lesseeNo: sessionStorage.lesseeNo,
        },
      }).then((res) => {
        if (res.data.code === 1) {
          console.log(res.data.data);
          let data = res.data.data;
          data.forEach((element) => {
            this.$set(element, "cropId", element.cropSortId);
          });
          this.options = data;
        } else {
          this.$message.warning("查询病虫害品种失败！！！");
        }
        // this.accessToken = res.data.data.access_token
        // this.$refs.zhupimg.setaccessToken(this.accessToken)
      });
    },
    identi(e) {
      this.usMessage = e;
      this.getallusmessage();
    },
    // 产看病虫害详细信息
    identifymet(e) {
      this.pdMessage = e;
      this.getallmessage();
    },
    // 点击识别按钮
    clickshibie() {
      // 获取病虫害图片
      let params = {
        cropId: this.pestvalue,
        imgUrl: this.nowrespimageurl,
      };
      // let params = {
      //   "cropId": "SD",
      //   "imgUrl": "https://ai-identification-third.obs.cn-east-2.myhuaweicloud.com/2021-10-08/0c0f8a697304401d9afbbceae5c84436.jpg"
      // }
      zhaxios({
        url:
          this.$baseurl.webServiceUrl +
          "v3/pestsDistinguish/cleverPlanting/aiDiscernById",
        method: "post",
        headers: {
          accessToken: sessionStorage.token,
          databaseName: sessionStorage.databaseName,
          organizationList: sessionStorage.organizationList,
          organizationNo: sessionStorage.organizationNo,
          virtualSystemNo: sessionStorage.virtualSystemNo,
          lesseeNo: sessionStorage.lesseeNo,
        },
        data: params,
      }).then((res) => {
        this.nowallpestlist = res.data.data;
        // console.log(this.nowallpestlist,'ww');
        // this.getallmessage()s
      });
    },
    // 获取详细信息
    getallusmessage() {
      // 获取病虫害图片
      let params = {
        cropId: this.pestvalue,
        pdId: this.usMessage.pdId,
      };
      // let params = {
      //   "cropId": "SD",
      //   "imgUrl": "https://ai-identification-third.obs.cn-east-2.myhuaweicloud.com/2021-10-08/0c0f8a697304401d9afbbceae5c84436.jpg"
      // }
      zhaxios({
        url:
          this.$baseurl.webServiceUrl +
          "v3/pestsDistinguish/cleverPlanting/pestcideByPdId",
        method: "post",
        headers: {
          accessToken: sessionStorage.token,
          databaseName: sessionStorage.databaseName,
          organizationList: sessionStorage.organizationList,
          organizationNo: sessionStorage.organizationNo,
          virtualSystemNo: sessionStorage.virtualSystemNo,
          lesseeNo: sessionStorage.lesseeNo,
        },
        data: params,
      }).then((res) => {
        this.newallmessage = res.data.data;
        this.dialogallVisible = true;
      });
    },
    // 获取详细信息
    getallmessage() {
      let testlist = [];
      // this.nowallpestlist.similarPDs.forEach(item => {
      //   testlist.push(item.pdId)
      // });
      testlist.push(this.pdMessage.pdId);
      // 获取病虫害图片
      let params = {
        cropId: this.pestvalue,
        pdIds: testlist,
      };
      // let params = {
      //   "cropId": "SD",
      //   "imgUrl": "https://ai-identification-third.obs.cn-east-2.myhuaweicloud.com/2021-10-08/0c0f8a697304401d9afbbceae5c84436.jpg"
      // }
      zhaxios({
        url:
          this.$baseurl.webServiceUrl +
          "v3/pestsDistinguish/cleverPlanting/findByPdIds",
        method: "post",
        headers: {
          accessToken: sessionStorage.token,
          databaseName: sessionStorage.databaseName,
          organizationList: sessionStorage.organizationList,
          organizationNo: sessionStorage.organizationNo,
          virtualSystemNo: sessionStorage.virtualSystemNo,
          lesseeNo: sessionStorage.lesseeNo,
        },
        data: params,
      }).then((res) => {
        this.newallpestmessage = res.data.data[0];
        this.dialogVisible = true;
      });
    },
    // 获取返回的图片链接
    respimageurl(e) {
      this.nowrespimageurl = e;
      this.clickshibie();
    },
    // TODO:获取图片url
    getimageurl(e) {
      if (e) {
        this.$message.success("上传成功");
      }
      this.nowimageurl = "data:image/png;base64," + e;
      // console.log(this.nowimageurl);
    },
    // 点击页码
    changePageSize(e) {
      this.pageSize = e;
      // 获取表格数据包
    },
    changeCurrentPage(e) {
      this.currentPage = e;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .zhcontent {
  margin: 0 !important;
}
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.top-line {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .save-but-line {
    height: 30px;
    float: right;
    cursor: pointer;
    img {
      height: 30px;
      width: 104px;
    }
  }
  .left-line {
    display: flex;
    align-items: center;
    justify-content: center;
    .el-select {
      margin-right: 10px;
      border: 1px solid #57acc2;
    }
    .upload {
      position: relative;
      width: 104px;
      height: 30px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        position: absolute;
      }
      .uploadImg {
        position: absolute;
        background-color: transparent;
        font-size: 0;
        ::v-deep .xunzeimage {
          border: none;
          cursor: pointer;
        }
      }
    }
  }
}
.insect-alert-main {
  width: 100%;
  height: calc(100% - 60px);
  .zh-myside {
    width: 100%;
    height: 50%;
    background-color: rgba(0, 72, 90, 0.7);
    display: flex;
    .leftImg {
      width: 33%;
      min-height: 50%;
      .image {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .table {
      overflow: hidden;
      overflow-y: auto;
      margin-left: 2%;
      width: 60%;
      min-height: 50%;
      border-top: 6px solid #05ebdb;
      .table-title {
        height: 24px;
        width: 157px;
        margin: 8px 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .row {
        width: 100%;
        padding: 10px;
        background-color: #065564;
        align-items: center;
        margin-bottom: 10px;
        font-size: 14px;
        display: flex;
        .tit {
          color: #03cac1;
          padding: 5px 15px;
          background-color: #003a48;
          box-shadow: 1px 1px 5px #03cac1;
          border: 2px solid #03cac1;
        }
        .similarity {
          margin-left: 20px;
        }
      }
    }
  }
  // 病虫害详细信息
  .footer {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 40px;
    color: #00c69e;
    text-align: center;
    background-color: #003947;
    padding-bottom: 10px;
    border: 1px solid #1093b6;
    border-radius: 5px;
    margin-bottom: 10px;

    .title {
      height: 36px;
      position: absolute;
      top: -18px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 18px;
      font-weight: 500;
      line-height: 20px;
      color: #fff;
    }
    .content {
      width: 100%;
      height: 100%;
      overflow: auto;
      .scroll-wrap {
        width: 100%;
        height: 100%;
        white-space: nowrap;
        .simborder {
          display: inline-flex;
          width: 33%;
          margin-right: calc(1% / 3);
          overflow: hidden;
          height: 100%;
          &:nth-child(n + 3) {
            margin-right: 0;
          }
          &:nth-child(1) {
            margin-left: calc(1% / 3);
          }
          .contents {
            width: 100%;
            height: 100%;
            margin-right: 10px;
            .contents-header {
              width: 100%;
              margin-top: 10px;
              margin-bottom: 10px;
              padding: 10px 0;
              .lineone {
                position: relative;
                height: 48px;
                background: linear-gradient(0deg, #038980, #05d5c6);
                display: flex;
                justify-content: center;
                line-height: 20px;
                margin-top: 20px;
                align-items: center;
                .one-title {
                  font-size: 21px;
                  padding-left: 10px;
                  color: #fff;
                }
                .img1s {
                  width: 93px;
                  position: absolute;
                  right: 24px;
                  height: 30px;
                  cursor: pointer;
                  background: url("~@/assets/unifiedPicture/drug-d.png")
                    no-repeat 100% 100%;
                  &:hover {
                    width: 93px;
                    height: 30px;
                    background: url("~@/assets/unifiedPicture/drug.png")
                      no-repeat 100% 100%;
                  }
                  .img1 {
                    width: 93px;
                    height: 30px;
                  }
                }
                .img2s {
                  width: 63px;
                  position: absolute;
                  left: 24px;
                  height: 30px;
                  cursor: pointer;
                  background: url("~@/assets/unifiedPicture/discern-d.png")
                    no-repeat 100% 100%;
                  &:hover {
                    width: 63px;
                    height: 30px;
                    background: url("~@/assets/unifiedPicture/discern.png")
                      no-repeat 100% 100%;
                  }
                }
                .img2 {
                  width: 63px;
                  height: 30px;
                }
              }
              .linetwo {
                width: 100%;
                height: 40px;
                padding: 5px 10px;
                text-align: left;
                color: #fff;
                background-color: #054f58;
                display: -webkit-box;
                white-space: wrap;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                line-height: 16px;
                font-size: 12px;
                border-bottom: 1px solid #03b0a4;
              }
            }
            .contents-img {
              width: 100%;
              height: 100%;
              // overflow: hidden;
              .linethree {
                width: 100%;
                height: 100%;
                // object-fit: contain;
                object-fit: cover;
              }
            }
          }
        }
      }
    }
  }
}

// dialog
.tetst {
  width: 100%;
  margin-bottom: 20px;
  border-radius: 2px;
  box-shadow: 0px 0px 5px #00000060;
  padding: 10px;
  > div {
    width: 100%;
    text-align: left;
    margin-bottom: 5px;
    font-size: 18px;
    font-family: "微软雅黑";
    > span {
      margin-left: 5px;
      font-weight: 500;
    }
  }
  .img {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    > img {
      width: 200px;
      margin-right: 5px;
    }
  }
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

::v-deep .el-dialog__wrapper {
  .el-dialog {
    .el-dialog__body {
      height: 100%;
    }
  }
}
.simline {
  height: 40px;
  line-height: 40px;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: 600;
  font-size: 16px;
  border-bottom: 2px #00c69e dashed;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
}

::v-deep .el-upload--picture-card {
  width: 40px !important;
  height: 40px !important;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid #6ecae3;
  margin-bottom: 0 !important;
}
::v-deep .el-upload--picture-card {
  position: relative;
}
::v-deep .el-upload--picture-card .el-icon-plus {
  font-size: 34px;
  color: #6ecae3;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
::v-deep .el-dialog__body {
  height: 90%;
  text-align: center;
  img {
    width: 100%;
  }
}
::v-deep .el-upload__tip {
  display: none;
}
::v-deep .zhcontent {
  overflow-y: hidden !important;
}
</style>
